<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home/wellcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商家管理</el-breadcrumb-item>
      <el-breadcrumb-item>新增商家</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <!-- 头部标签 -->
      <div slot="header" class="clearfix">
        <span><i class="el-icon-menu">操作面板</i></span>
      </div>
      <el-row>
        <el-col :span="10">

          <el-form label-width="80px" :model="ruleForm" :rules="rules" ref="ruleForm">
            <!-- 商家图片 -->
            <el-form-item label="商家图片" prop="b_img">
              <el-upload class="avatar-uploader" action="http://localhost:9000/upload" :show-file-list="false"
                :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.b_img" :src="ruleForm.b_img" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <!-- 商家其他信息 -->
            <el-form-item label="商家名称" prop="b_name">
              <el-input type="text" v-model="ruleForm.b_name" placeholder="请输入商家名称" />
            </el-form-item>
            <el-form-item label="提供服务" prop="b_offer">
              <!-- 复选框 -->
              <el-checkbox-group v-model="ruleForm.b_offer">
                <el-checkbox label="干净饮用水"></el-checkbox>
                <el-checkbox label="消毒猫砂盆"></el-checkbox>
                <el-checkbox label="复宠物玩具"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="商家评分" prop="b_score">
              <el-input type="number" v-model="ruleForm.b_score" placeholder="请输入商家评分" />
            </el-form-item>
            <el-form-item label="寄养价格" prop="b_price">
              <el-input type="number" v-model="ruleForm.b_price" placeholder="请输入寄养价格">
                <template slot="append">/天</template>
              </el-input>
            </el-form-item>
            <el-form-item label="店铺面积" prop="b_JS">
              <el-input type="text" v-model="ruleForm.b_JS" placeholder="请输入店铺面积">
                <template slot="append">m²</template>
              </el-input>
            </el-form-item>
            <el-form-item label="店铺地址" prop="b_city">
              <el-input type="text" v-model="ruleForm.b_city" placeholder="请输入店铺地址" />
            </el-form-item>

            <el-form-item label="店铺评价" prop="b_feature">
              <el-input type="text" v-model="ruleForm.b_feature" placeholder="请输入店铺评价" />
            </el-form-item>
            <el-form-item label="详细地址" prop="b_city_detail">
              <el-input type="textarea" :row="2" v-model="ruleForm.b_city_detail" placeholder="请输入店铺评价" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-check" @click="submitForm('ruleForm')">添加</el-button>
              <el-button icon="el-icon-refresh-right" @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { addPetBusiness } from '@/http/api'
export default {
  data() {
    return {
      ruleForm: {    // 接收表单数据
        b_img: '',
        b_price: '',
        b_JS: '',
        b_score: '',
        b_feature: '',
        b_city_detail: '',
        b_offer: [],
        b_name: ''
      },
      // 校验规则
      rules: {
        b_img: [
          { required: true, message: '请选择商家图片', trigger: 'change' },
        ],
        b_name: [
          { required: true, message: '请填写商家名称', trigger: 'blur' }
        ],
        b_city: [
          { required: true, message: '请填写商家所在城市', trigger: 'blur' }

        ],
        b_score: [
          { required: true, message: '请填写商家评分', trigger: 'blur' }

        ],
        b_price: [
          { required: true, message: '请填写寄养价格', trigger: 'blur' }

        ],
        b_offer: [
          { required: true, message: '请选择提供服务', trigger: 'blur' }

        ],
        b_JS: [
          { required: true, message: '请填写商家面积', trigger: 'blur' }

        ],
        b_feature: [
          { required: true, message: '请填写商家标签', trigger: 'blur' }
        ],
        b_city_detail: [
          { required: true, message: '请填写店铺详细地址', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.ruleForm.b_img = res.data
      console.log('图片位于服务器的地址：', res.data);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 或者格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    // 提交表单
    submitForm(ruleForm) {
      // 校验表单， 校验之前，需要在rules中配置校验规则
      this.$refs[ruleForm].validate((valid) => {
        // 校验通过
        if (valid) {
          // 将商家服务装换为字符串
          this.$set(this.ruleForm, 'b_offer', this.ruleForm.b_offer.toString())
          // 发起请求
          addPetBusiness(this.ruleForm).then(res => {
            if (res?.data.code == 200) {
              this.$message.success(res?.data?.msg)
              // 清空表单
              this.resetForm(ruleForm)
            } 
            console.log('添加商家信息返回', res.data);
          }).catch(err => {
            this.$message.error(err)
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 重置表单
    resetForm(ruleForm) {
      this.$refs[ruleForm].resetFields();
    }
  }
}
</script>

<style>
.el-breadcrumb {
  margin-bottom: 20px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
</style>